<!-- 申请考勤 -->
<template>
  <div style="padding:30px">
    <!-- 事假申请 -->
    <div>
      <el-descriptions :column="2">
        <el-descriptions-item label="员工编号">U0001</el-descriptions-item>
        <el-descriptions-item label="员工姓名">王王</el-descriptions-item>
        <el-descriptions-item label="所属部门">心理科</el-descriptions-item>
        <el-descriptions-item label="所属科室">心理一科</el-descriptions-item>
        <el-descriptions-item label="从事专业">临床</el-descriptions-item>
        <el-descriptions-item label="专业技术职务">临床</el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 申请信息 -->
    <div>
      <el-form ref="form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="申请类型">
              <!-- v-model="form.epmID" -->
              <el-input v-model="form.type" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请原因">
              <el-input v-model="form.name" placeholder="请输入员工姓名" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="开始时间">
              <!-- v-model="form.epmID" -->
              <el-date-picker
                v-model="form.startTime"
                type="datetime"
                placeholder="选择日期时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="form.endTime"
                type="datetime"
                placeholder="选择日期时间"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 审批流程 -->
    <div>
      <el-timeline>
        <el-timeline-item
          v-for="(activity, ind) in activities"
          :key="ind"
          :timestamp="activity.content"
          placement="top"
        >
          <el-card>
            <el-tag
              v-for="(item, index) in activity.list"
              v-if="index<3"
              :key="item.name"
              :type="item.sex"
              :class="index>=2&&activity.list.length>3?'mrgR':''"
              effect="plain"
              closable
              @close="handleClose(item,ind,activity.type)"
            >
              <p style="overflow: hidden;">
                <img v-if="item.sex=='男'" src="@/assets/imges/nan.png" alt="">
                <img v-else src="@/assets/imges/nv.png" alt="">
              </p>
              <p style="text-align: center;">{{ item.name }}</p>
              <p class="jtou"> > </p>
              <p v-if="index>=2&&activity.list.length>3" class="jtou1">...</p>
            </el-tag>

            <!-- 添加按钮 -->
            <span class="btnBox" @click="addPople(activity.type)"> <img src="@/assets/imges/u36.svg" alt=""></span>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      :title="dialogTitle[checkType]"
      :visible.sync="centerDialogVisible"
      width="60%"
      min-width="1035px"
      :close-on-click-modal="false"
      center
      @close="handleCancle"
    >
      <!-- 审批人 Approval v-if="checkType == 'Approval'" @change-page="changeCurentPage" :empData="empData" :loading="loading"-->
      <emp
        ref="Approval"
        v-model="Approval"
        :class="checkType == 'Approval'?'':'disNon'"
        :current-page="currentPage"
        :choose-info-old="ApprovalChooseInfoOld"
        @choose-emp="(info) => { ApprovalChooseInfo = info }"
        @is-clear-btn="(flag) => { isCancleBtn = flag }"
      />
      <!-- 抄送人 -->
      <emp
        ref="SendP"
        v-model="SendPVal"
        :class="checkType == 'SendP'?'':'disNon'"
        :emp-data="empData"
        :loading="loading"
        :current-page="currentPage"
        :choose-info-old="SendPChooseInfoOld"
        @choose-emp="(info) => { SendPChooseInfo = info }"
        @is-clear-btn="(flag) => { isCancleBtn = flag }"
        @change-page="changeCurentPage1"
      />

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleCancle">取消</el-button>
        <el-button size="small" type="primary" @click="handleConfirm">确定</el-button>
      </span>

    </el-dialog>
  </div>
</template>
<script>
// import { getStaffList } from '@/api/newUsertest'
import Emp from './components/staff'
import { getStaffList1, getUnitsList } from '@/api/newUsertest'
// import designer from '../lcsj/designer.vue'
export default {
  components: { Emp },
  data() {
    return {
      loading: false,
      form: {
        type: '事假'
      },
      dialogTitle: { // 弹框标题
        Approval: '选择审批人',
        SendP: '选择抄送人'
      },
      activities: [{
        content: '审批人',
        type: 'Approval',
        list: []
      }, {
        content: '抄送人',
        type: 'SendP',
        timestamp: '2018-04-13',
        list: [
        // {
        //   name:"王初三",
        //   sex:"男"
        // },
        // {
        //   name:"小席",
        //   sex:"女"
        // }
        ]
      }],

      currentPage: 1,
      empData: {}, // 员工列表接口数据
      checkType: '',
      centerDialogVisible: false, // 弹框是否显示
      isCancleBtn: false,
      // 审批人数据
      ApprovalChooseInfo: [], // 员工选择数据
      Approval: '', // 搜索值
      ApprovalChooseInfoOld: [], // 已选择的员工旧数组

      // 抄送人数据
      SendPVal: '', // 搜索值
      SendPChooseInfoOld: [], // 已选抄送人旧数组
      SendPChooseInfo: []
    }
  },

  watch: {
    // 员工列表输入框自动搜索
    Approval(val) {
      if (this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.currentPage = 1
        this.getStaffInfo(val)
        this.timer = false
      }, 1200)
    },
    // 抄送人
    SendPVal(val) {
      if (this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.currentPage = 1
        this.getStaffInfo(val)
        this.timer = false
      }, 1200)
    }
  },
  mounted() { // 挂载后
    // this.fetchData()
    this.getStaffInfo()
  },

  methods: {
    // 获取员工数据
    getStaffInfo(Approval) {
      const params = {
        key: Approval,
        pageSize: 9,
        currentPage: this.currentPage
      }
      this.loading = true
      getStaffList1({ params }).then(res => {
        if (res.code == 20000) {
          this.activities[0].list = []
          this.empData = res.data
          var list = [{
            'empId': 100200,
            'name': '郝杰',
            'gender': '0',
            'birth_date': '2021-01-25',
            'deptName': '行政办公室',
            'hire_date': '1986-04-08',
            'is_enable': '否',
            'address': '桂林市公安县',
            'type': '离职',
            'phone': '13520073575',
            'email': '1841031740@qq.com'
          },
          {
            'empId': 200200,
            'name': '魏丽',
            'gender': '1',
            'birth_date': '1982-10-26',
            'deptName': '财务部',
            'hire_date': '1973-03-12',
            'is_enable': '是',
            'address': '巴中市泽州县',
            'type': '离职',
            'phone': '13520073575',
            'email': '1841031740@qq.com'
          },
          {
            'empId': 300200,
            'name': '蔡涛',
            'gender': '1',
            'birth_date': '2011-02-19',
            'deptName': '质控管理部',
            'hire_date': '2015-04-23',
            'is_enable': '否',
            'address': '芜湖市盐池县',
            'type': '在职',
            'phone': '13520073575',
            'email': '1841031740@qq.com'
          }]
          this.ApprovalChooseInfoOld = list
          // 审批人
          if (this.ApprovalChooseInfoOld.length > 0) {
            this.ApprovalChooseInfoOld.forEach((element, index) => {
              this.activities[0].list.push(element)
            })
            this.activities[0].list = [...new Set(this.activities[0].list)]
          }

          // 抄送人
          if (this.SendPChooseInfoOld.length > 0) {
            this.SendPChooseInfoOld.forEach((element, index) => {
              this.activities[1].list.push(element)
            })
            this.activities[1].list = [...new Set(this.activities[1].list)]
          }

          this.currentPage = res.data.pagenum
          this.loading = false
        }
      })
    },
    handleCancle() {
      if (this.checkType == 'Send') {
        if (this.SendPChooseInfoOld) {
          this.SendPChooseInfo = [].concat(this.SendPChooseInfoOld)
          // this.$refs.Send.recoverData();
        }
      } else if (this.checkType == 'Approval') {
        if (this.ApprovalChooseInfoOld) {
          this.ApprovalChooseInfo = [].concat(this.ApprovalChooseInfoOld)
          // this.$refs.Approval.recoverData();
        }
        this.Approval = ''
      }
      this.centerDialogVisible = false
    },
    // 移除
    handleClose(data, ind, type) {
      console.log(data)
      this.activities[ind].list = this.activities[ind].list.filter(item1 => item1.empId !== data.empId)
      if (type == 'Approval') {
        this.ApprovalChooseInfoOld = this.activities[ind].list
      }
      if (type == 'SendP') {
        this.SendPChooseInfoOld = this.activities[ind].list
      }
    },
    // 添加人员
    addPople(type) {
      this.checkType = type
      this.centerDialogVisible = true
      if (type == 'Approval') {
        this.getStaffInfo(this.Approval)
      } else if (type == 'SendP') {
        this.getStaffInfo(this.SendPVal)
      }
      console.log('点击了', type)
    },
    // 确认提交
    handleConfirm() {
      if (this.checkType == 'Approval') {
        this.activities[0].list = []
        console.log(this.ApprovalChooseInfo)
        for (let i = 0; i < this.ApprovalChooseInfo.length; i++) {
          this.activities[0].list.push(this.ApprovalChooseInfo[i])
        }
        this.activities[0].list = [...new Set(this.activities[0].list)]
        if (this.ApprovalChooseInfo.length || this.isCancleBtn) {
          this.ApprovalChooseInfoOld = this.ApprovalChooseInfo
        }
        console.log(this.ApprovalChooseInfoOld)
      }
      this.centerDialogVisible = false
      if (this.checkType == 'SendP') {
        this.activities[1].list = []
        console.log(this.SendPChooseInfo)
        for (let i = 0; i < this.SendPChooseInfo.length; i++) {
          this.activities[1].list.push(this.SendPChooseInfo[i])
        }
        this.activities[1].list = [...new Set(this.activities[1].list)]
        if (this.SendPChooseInfo.length || this.isCancleBtn) {
          this.SendPChooseInfoOld = this.SendPChooseInfo
        }
      }
    },
    changeCurentPage(curPage) {
      debugger
      this.currentPage = curPage
      this.getStaffInfo(this.Approval)
    },
    changeCurentPage1(curPage) {
      this.currentPage = curPage
      // this.getStaffInfo(this.sendSearch);
    }

  }
}
</script>
<style scoped lang="scss">
.disNon{
  display: none;
}
.mrgR{
  margin-right: 80px !important;
}
::v-deep .el-descriptions-item__container{
  font-size: 18px;
  .el-descriptions-item__label{
    color: #999999;

  }
}

::v-deep .el-card__body{
  padding: 20px 20px 30px;
  display: flex;
  align-items: center;
  .btnBox{
    display: flex;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    border-color: #1890ff;
    border-width: 1px;
    border-style: dashed;
    align-items: center;
    justify-content: center;
    img{
    width: 40%;
    height: 40%;
  }
  }
}
::v-deep .el-form-item__label{
  font-size: 16px;
}
::v-deep .el-tag--medium{
  height: 60px;
  width: 60px;
  position: relative;
  margin-right: 40px;
  border-radius: 50%;
  border-color: linen;

  .jtou{
    position: absolute;
    right: -31px;
    top: 16px;
    color: #CCCCCC;
    font-size: 20px
  }
  .jtou1{
    position: absolute;
    font-size: 40px;
    right: -76px;
    top: 6px;
    color: #1890ff;
  }
  img{
    width: 100%;
    height: 52px;
    border-radius: 50%;
  }
}

::v-deep .el-tag .el-icon-close{
    width: 20px;
    height: 20px;
    font-size: 18px;
    top: -85px;
    right: -50px;
}

</style>
